<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <el-button-group>
        <el-button type="primary" v-if="permissions.channel_source_add" icon="plus" @click="handlerAdd">添加</el-button>
        <el-button type="primary" v-if="permissions.channel_source_upd" icon="edit" @click="handlerEdit">编辑</el-button>
        <el-button type="primary" v-if="permissions.channel_source_del" icon="delete" @click="handleDelete">删除</el-button>
      </el-button-group>
    </div>


    <!--:filter-node-method="filterNode"-->
    <!--@node-click="getNodeData"-->
    <el-row>
      <el-col :span="8" style='margin-top:15px;'>
        <el-tree
          class="filter-tree"
          :data="treeData"
          node-key="id"
          highlight-current
          default-expand-all
          :props="defaultProps"
          @node-click="getNodeData"
        >
        </el-tree>
      </el-col>

      <el-col :span="16" style='margin-top:15px;'>
        <el-card class="box-card">
          <el-form label-position="rhiht" label-width="80px" :model="form" ref="form">
            <el-form-item label="父级节点" prop="parentId">
              <el-input v-model="form.parentId" :disabled="formEdit" placeholder="请输入父级节点" disabled></el-input>
            </el-form-item>
            <el-form-item label="节点编号" prop="id" v-if="formEdit">
              <el-input v-model="form.id" :disabled="formEdit" placeholder="节点编号"></el-input>
            </el-form-item>
            <el-form-item label="渠道名称" prop="name">
              <el-input v-model="form.name" :disabled="formEdit" placeholder="请输入名称"></el-input>
            </el-form-item>
            <el-form-item label="排序" prop="orderNum">
              <el-input v-model="form.orderNum" :disabled="formEdit" placeholder="请输入排序"></el-input>
            </el-form-item>
            <el-form-item v-if="formStatus == 'update'">
              <el-button type="primary" @click="update">更新</el-button>
              <el-button @click="onCancel">取消</el-button>
            </el-form-item>
            <el-form-item v-if="formStatus == 'create'">
              <el-button type="primary" @click="create">保存</el-button>
              <el-button @click="onCancel">取消</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>


    </el-row>

  </div>
</template>

<script>
  import { fetchTree, getObj, addObj, edit, remove } from '@/api/channelSource'
  import { mapGetters } from 'vuex'
  export default {
    name: 'channel',
    data() {
      return {
        treeData: [],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        form: {
          id: undefined,
          name: undefined,
          parentId: undefined,
          orderNum: undefined
        },
        formEdit: true,
        formStatus: '',
        showElement: false,
        currentId: 0
      }
    },
    created() {
      this.getTreeData()
    },
    computed: {
      ...mapGetters([
        'elements',
        'permissions'
      ])
    },
    methods: {
      getTreeData() {   //  初始化tree
        fetchTree().then(reponse => {
          this.treeData = reponse.data
        })
      },
      getNodeData(data) {  //   选择节点
        if (!this.formEdit) {
          this.formStatus = 'update'
        }
        getObj(data.id).then(response => {
          this.form = response.data
        })
        this.currentId = data.id
        // this.showElement = true
      },
      handlerAdd() {  //  添加
        this.formEdit = false
        this.formStatus = 'create'
        this.restForm()
      },
      restForm() {  // 重置表单
        this.form = {
          // id: undefined,
          name: undefined,
          parentId: this.currentId,
          orderNum: undefined
        }
      },
      onCancel() { //  取消
        this.formEdit = true
        this.formStatus = ''
      },
      create() {  //  保存添加
        addObj(this.form).then(() => {
          this.onCancel()
          this.getTreeData()
          this.$message({
            message: '添加成功',
            type: 'success'
          })
        })
      },
      handlerEdit() {  // 编辑
        if (this.form.name !== undefined) {
          this.formStatus = 'update'
          this.formEdit = false
        } else {
          this.$message({
            message: '请选择编辑项',
            type: 'warning'
          })
        }
      },
      update() {  //  保存修改
        edit(this.form).then(() => {
          this.onCancel()
          this.getTreeData()
          this.$message({
            message: '修改成功',
            type: 'success'
          })
        })
      },
      handleDelete() {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.form.delFlag = '1'
          remove(this.form).then(() => {
            this.getTreeData()
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    }
  }
</script>

<style scoped>

</style>
